import React, { Component } from 'react';
import { Form, Collapse, Button, Col, Row, Tooltip, Icon, Tag, Upload, message } from 'antd';
import styles from './form.less';
import { getAuthority } from '../../utils/authority';

const ButtonGroup = Button.Group;
const Panel = Collapse.Panel;
const FormItem = Form.Item;

class SearchForm extends Component {
  handleSubmit = e => {
    !e || e.stopPropagation();
    const { onSubmit, form } = this.props;
    form.validateFields(err => {
      if (err) return;
      onSubmit();
    });
  };

  handleReset = e => {
    e.stopPropagation();
    const { form } = this.props;
    form.resetFields();
  };

  render() {
    const {
      isSum,
      sumText,
      reportUrl,
      header,
      layout,
      fields,
      onModal,
      onAdd,
      onSend,
      onDel,
      onBind,
      onPay,
      onMoney,
      onTicket,
      onReject,
      onUrgent,
      onDownload,
      onOil,
      onInsurance,
      onSwap,
      onInBox,
      form,
      isEdit,
      isUrgent,
      isAdd,
      isDel,
      isSend,
      isBind,
      isMoney,
      isPay,
      isReject,
      isReport,
      isTicket,
      isDownload,
      isInsurance,
      isOil,
      isSwap,
      isInBox,
      moneyText,
      passLoading,
      rejectLoading,
    } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form className={styles.tableListForm} onSubmit={this.handleSubmit} layout={layout}>
        <Collapse accordion defaultActiveKey={['1']}>
          <Panel
            header={
              <div>
                <Tag color="green">{header}</Tag>
                {isSum ? <Tag color="red">{sumText}</Tag> : ''}
                <ButtonGroup>
                  {isAdd ? (
                    <Tooltip title="添加">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onAdd();
                        }}
                      >
                        <Icon type="plus" />
                        添加
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isDel ? (
                    <Tooltip title="删除">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onDel();
                        }}
                      >
                        <Icon type="minus" />
                        删除
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isEdit ? (
                    <Tooltip title="编辑">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onModal('edit');
                        }}
                      >
                        <Icon type="edit" />
                        编辑
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isSend ? (
                    <Tooltip title="提交">
                      <Button
                        loading={passLoading}
                        onClick={e => {
                          e.stopPropagation();
                          onSend();
                        }}
                      >
                        <Icon type="check" />
                        提交
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isReject ? (
                    <Tooltip title="驳回">
                      <Button
                        loading={rejectLoading}
                        onClick={e => {
                          e.stopPropagation();
                          onReject();
                        }}
                      >
                        <Icon type="close" />
                        驳回
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isBind ? (
                    <Tooltip title="绑定订单">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onBind();
                        }}
                      >
                        <Icon type="vertical-align-middle" />
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isTicket ? (
                    <Tooltip title="开票">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onTicket();
                        }}
                      >
                        <Icon type="pay-circle" />
                        开票
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isMoney ? (
                    <Tooltip title={moneyText}>
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onMoney();
                        }}
                      >
                        <Icon type="money-collect" />
                        {moneyText}
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isPay ? (
                    <Tooltip title="申请支付">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onPay();
                        }}
                      >
                        <Icon type="money-collect" />
                        申请支付
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isUrgent ? (
                    <Tooltip title="紧急支付">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onUrgent();
                        }}
                      >
                        <Icon type="account-book" />
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isInsurance ? (
                    <Tooltip title="保险">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onInsurance();
                        }}
                      >
                        <Icon type="insurance" />
                        保险
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isSwap ? (
                    <Tooltip title="移交">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onSwap();
                        }}
                      >
                        <Icon type="swap" />
                        移交
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isInBox ? (
                    <Tooltip title="领用">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onInBox();
                        }}
                      >
                        <Icon type="inbox" />
                        领用
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  {isOil ? (
                    <Tooltip title="加油">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onOil();
                        }}
                      >
                        <Icon type="bg-colors" />
                        加油
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                  <Tooltip title="重置">
                    <Button onClick={this.handleReset}>
                      <Icon type="retweet" />
                      重置
                    </Button>
                  </Tooltip>
                  <Tooltip title="查询">
                    <Button onClick={this.handleSubmit}>
                      <Icon type="search" />
                      查询
                    </Button>
                  </Tooltip>
                  {isReport ? (
                    <span onClick={e => e.stopPropagation()}>
                      <Tooltip title="导入">
                        <Upload
                          action={reportUrl}
                          withCredentials={true}
                          showUploadList={false}
                          headers={{ token: getAuthority() }}
                          onChange={({ file, fileList }) => {
                            if (file.status === 'done') {
                              message.success('上传成功！');
                              this.handleSubmit();
                            }
                            if (file.status === 'error') {
                              message.error(file.response.errorMsg);
                            }
                          }}
                        >
                          <Button>
                            <Icon type="upload" />
                            导入
                          </Button>
                        </Upload>
                      </Tooltip>
                    </span>
                  ) : (
                    ''
                  )}
                  {isDownload ? (
                    <Tooltip title="导出">
                      <Button
                        onClick={e => {
                          e.stopPropagation();
                          onDownload();
                        }}
                      >
                        <Icon type="download" />
                        导出
                      </Button>
                    </Tooltip>
                  ) : (
                    ''
                  )}
                </ButtonGroup>
              </div>
            }
            key="1"
          >
            {fields.map((row, i) => {
              return (
                <Row key={i} gutter={{ md: 8, lg: 24, xl: 48 }}>
                  {row.cols.map((col, j) => {
                    return (
                      <Col key={j} md={col.md} sm={24}>
                        <FormItem label={col.label}>
                          {getFieldDecorator(col.name)(col.component)}
                        </FormItem>
                      </Col>
                    );
                  })}
                </Row>
              );
            })}
            {/* <Row>
              <Col md={8} sm={24}>
                {
                <ButtonGroup>
                  {isAdd ? (<Tooltip title="添加"><Button onClick={e =>{ e.stopPropagation(); onAdd() }}><Icon type="plus"/></Button></Tooltip>) : ""}
                  {isDel ? (<Tooltip title="删除"><Button onClick={() => onDel()}><Icon type="minus"/></Button></Tooltip>) : ""}
                  {isEdit ? (<Tooltip title="编辑"><Button onClick={() => onModal('edit')}><Icon type="edit"/></Button></Tooltip>) : ""}
                  {isSend ? (<Tooltip title="提交"><Button onClick={() => onSend()}><Icon type="check"/></Button></Tooltip>) : ""}
                  {isReject ? (<Tooltip title="驳回"><Button onClick={() => onReject()}><Icon type="close"/></Button></Tooltip>) : ""}
                  {isBind ? (<Tooltip title="绑定订单"><Button onClick={() => onBind()}><Icon type="vertical-align-middle"/></Button></Tooltip> ) : ""}
                  {isMoney? (<Tooltip title="申请费用"><Button onClick={() => onMoney()}><Icon type="money-collect"/></Button></Tooltip>) : ""}
                  <Tooltip title="重置"><Button onClick={this.handleReset}><Icon type="retweet"/></Button></Tooltip>
                  <Tooltip title="查询"><Button htmlType="submit"><Icon type="search"/></Button></Tooltip>
                </ButtonGroup>}
              </Col>
            </Row>*/}
          </Panel>
        </Collapse>
      </Form>
    );
  }
}

SearchForm = Form.create({
  onFieldsChange(props, changedFields) {
    props.onFieldsChange(changedFields);
  },
  mapPropsToFields(props) {
    const { fieldValue, fields } = props;
    let newFeilds = {};
    fields.map(row => {
      row.cols.map(col => {
        newFeilds[col.name] = Form.createFormField({
          ...fieldValue[col.name],
        });
      });
    });
    return newFeilds;
  },
})(SearchForm);

export default SearchForm;
